<template>
  <div class="table-prefix">
    <div class="left">
      <slot name="tablePrefixSlot"></slot>
    </div>
    <div class="reft">
      <slot name="tableSuffixSlot"></slot>
      <a-dropdown class="ml-ms more">
        <a-button type="default"><ellipsis-outlined /></a-button>
        <template #overlay>
          <a-menu @click="refresh">
            <a-menu-item key="1"> 刷新 </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
  </div>
  <a-spin :spinning="isLoad">
    <a-table
      :columns="tableColumns"
      :data-source="data"
      :scroll="tableOption.scroll"
      :bordered="isBordered"
      :pagination="false"
      @change="tableChange"
      :rowSelection="rowSelection"
      :rowKey="(record) => record.Id"
    >
      <template #bodyCell="{ text, record, index, column }">
        <template v-if="column.slot === 'operation'">
          <slot name="operation" :rowData="record" :value="text" :rowIndex="index"></slot>
        </template>
        <template v-else-if="column.slot === 'date'">
          {{ dateFormat(text, 'yyyy/MM/dd hh:mm') }}
        </template>
        <template v-else-if="column.slot === 'tags'">
          <slot name="tags" :rowData="record" :value="text" :rowIndex="index"></slot>
        </template>
        <template v-else-if="column.slot === 'custom'">
          <slot :name="column.dataIndex" :rowData="record" :value="text" :rowIndex="index"></slot>
        </template>
      </template>
    </a-table>
  </a-spin>
  <div class="pagination mt-ms">
    <a-pagination
      @change="onChange"
      v-model:current="currentPage"
      v-model:pageSize="pageSize"
      :defaultCurrent="1"
      :defaultPageSize="10"
      :total="dataCount"
      show-size-changer
      show-quick-jumper
      :page-size-options="pageSizeOptions"
    >
      <template #buildOptionText="props">
        <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
        <span v-else>全部</span>
      </template>
    </a-pagination>
  </div>
</template>
<script>
import { defineComponent, reactive, ref } from 'vue';
import { getPageData } from '@/api/index.js';
import { formatDate } from '@/utils/filters.js';
import { EllipsisOutlined } from '@ant-design/icons-vue';

const pageSizeOptions = reactive(['10', '20', '30', '40', '50']);
const currentPage = ref(1);
const pageSize = ref(10);
const isLoad = ref(false);
const dataCount = ref(0);

export default defineComponent({
  props: {
    tableOption: {
      type: Object,
      default: {
        url: '',
        scroll: { x: 1024 },
        tableName: 'table-list',
        showExportBtn: false,
      },
    },
    tableColumns: {
      type: Array,
      default: [],
    },
    requestData: {
      type: Object,
      default: {
        filters: '',
        curPage: 1,
        pageSize: 10,
        extraData: {},
      },
    },
    reload: {
      type: Boolean,
      default: false,
    },
    rowSelection: {
      type: Object,
      default: null,
    },
  },
  components: {
    EllipsisOutlined,
  },
  setup(props) {
    const data = ref([]);
    const rowSelection = reactive(props.rowSelection);
    const tableOption = reactive(props.tableOption);
    const requestData = reactive(props.requestData);
    const tableColumns = reactive(props.tableColumns);
    const tableChange = (pagination, filters, sorter, { currentDataSource }) => {};

    const getData = async () => {
      isLoad.value = true;
      await getPageData(tableOption.url, requestData).then((item) => {
        if (+item.Status === 200) {
          data.value = item.Data.Data;
          dataCount.value = item.Data.Total;
          isLoad.value = false;
        }
      });
    };

    const refresh = async () => {
      await getData();
    };

    const onChange = (page, size) => {
      currentPage.value = page;
      pageSize.value = size;
      requestData.curPage = page;
      requestData.pageSize = size;
      refresh();
    };
    const dateFormat = (value, format) => {
      return formatDate(value, format);
    };

    // 默认加载列表
    refresh();

    return {
      data,
      isLoad,
      dataCount,
      tableColumns,
      rowSelection,
      isBordered: true,
      currentPage,
      pageSize,
      pageSizeOptions,
      onChange,
      tableChange,
      refresh,
      dateFormat,
    };
  },
});
</script>
<style lang="less" scoped>
.table-prefix {
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
}

.pagination {
  display: flex;
  justify-content: flex-end;
}

::v-deep .ant-btn-group {
  display: inline-block;
}

.more {
  padding: 0 5px !important;
}

::v-deep .ant-table-thead > tr > th,
.ant-table-tbody > tr > td,
.ant-table tfoot > tr > th,
.ant-table tfoot > tr > td {
  padding: 10px !important;
}
</style>
